<template>
        <div class="loginContainer">
            <div :class="activeName=='register'?'loginBox regBox':'loginBox'">
                <div class="title"><h2>羽毛球馆信息管理系统</h2></div>
                <!-- 选项卡 -->
                   <el-tabs v-model="activeName" :stretch="true" >
                        <!-- 登录界面 -->
                        <el-tab-pane label="登录" name="login">
                             <el-form ref="loginFormRef" :label-position="'left'" label-width="90px" :model="loginForm" :rules="rules">
                                <el-form-item label="用户名:" prop="username">
                                    <el-input v-model="loginForm.username"></el-input>
                                </el-form-item>
                                <el-form-item label="密 码:"  prop="password">
                                    <el-input v-model="loginForm.password" show-password></el-input>
                                </el-form-item>
                                <div class="radioBox">
                                      <el-radio v-model="radio" label="0">用户</el-radio>
                                      <el-radio v-model="radio" label="1">管理员</el-radio>
                                </div>
                                
                                    <el-button class="btn-log" type="primary" @click="login">登录</el-button>  
                            </el-form>
                        </el-tab-pane>
                        <!-- 注册界面 -->
                         <el-tab-pane label="注册" name="register">
                              <el-form ref="registerFormRef" :label-position="'left'" label-width="90px" :rules="rules" :model="regForm">
                                <el-form-item label="用户名:" prop="username">
                                    <el-input v-model="regForm.username"></el-input>
                                </el-form-item>
                                <el-form-item label="密 码:"  prop="password">
                                    <el-input v-model="regForm.password" show-password></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码:"  prop="repeatPass">
                                    <el-input v-model="regForm.repeatPass" show-password></el-input>
                                </el-form-item>
                                <el-form-item label="电子邮箱:"  prop="email">
                                    <el-input v-model="regForm.email"></el-input>
                                </el-form-item>
                                    <el-button  class="btn-reg" type="primary" @click="Register">立即注册</el-button>  
                            </el-form>
                         </el-tab-pane>
                   </el-tabs>
            </div>
        </div>
</template>

<script>
import Api from '../api/index'
import {mapMutations} from 'vuex'
export default {
    data() {
           var confirmPassword = (rule,value,callback) =>{
          
               if(value !== this.regForm.password){
                    callback(new Error('两次输入密码不一致!'));
                }else {
                    callback();
                }
         }
        return {
            radio:'0',
            activeName:'login',
            loginForm:{
                username:'',
                password:''
            },
             regForm:{
                username:'',
                password:'',
                repeatPass:'',
                email:''
            },
            rules:{
                username:[{ required: true, message: '请输入用户名', trigger: 'blur' },
                          { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur'}],
                password:[{ required: true, message: '请输入密码', trigger: 'blur' },
                          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}],
                 
                repeatPass:[{validator:confirmPassword,required:true,trigger:'blur'}],
                email:[{required:true,message:'请输入邮箱',trigger:'blur'}]         
            },
        }
    },
    methods: {
        ...mapMutations("login",["setUser","setRole"]),
        ...mapMutations("menu",["setMenu"]),
        // 登录功能
         login(){
            this.$refs.loginFormRef.validate( async (valid) => {
                if(!valid) return;
                 console.log(this.loginForm);
                // let res,menuRes;
                let res;
                if(this.radio==='0'){
                   res = await Api.loginUser(this.loginForm);
                //    menuRes = await Api.menu('user');
                //    console.log(menuRes);
                }
                else{
                   res = await Api.loginAdmin(this.loginForm);
                //    menuRes = await Api.menu('admin');
                }
               
                console.log(res);
                if(res.data.status !== 200 ) return this.$message.error('登录失败');
                this.$message.success('登录成功')
                // 处理token和menu
                localStorage.setItem('token',JSON.stringify(res.data.token));
                sessionStorage.setItem('profile',JSON.stringify(res.data.profile));
                // sessionStorage.setItem('menu',JSON.stringify(menuRes.data));
                // 将用户相关信息存入Vuex
                this.setUser(res.data);
                // this.setMenu(menuRes.data);
                // 设置角色标志
                this.setRole(this.radio)
                sessionStorage.setItem('role',JSON.stringify(this.radio));
                //获取菜单列表
                this.getMenuList(this.radio);   
                  // 跳转到主页
                if(this.radio==='1')
                  this.$router.push('/home_Ad');
                else
                this.$router.push('/home');
                
            })
        },
        // 注册功能
        Register(){
             this.$refs.registerFormRef.validate( async (valid) => {
                if(!valid) return;
                let {data:res} = await Api.register(this.regForm);
                console.log(res);
                if(res.status !== 200 )return this.$message.error(res.msg);
                this.$message.success('注册成功');
                this.activeName = "login";
            
            })

            this.$refs.registerFormRef.resetFields();
        },
        async getMenuList(type){
            let menuRes;
            if(type ==='0'){
                menuRes = await Api.menu('user');
            }
            else{
                menuRes = await Api.menu('admin');
            }
            console.log(menuRes);
             sessionStorage.setItem('menu',JSON.stringify(menuRes.data));
             this.setMenu(menuRes.data);
            
        }
    },
}
</script>

<style scoped lang="less">
    .loginContainer{
        height: 100%;
        background: cadetblue;
        // background: url('../assets/img/loginBackground.png') no-repeat;
        background-image: linear-gradient(125deg,#70f3ff,#44cef6,#177cb0,#4b5cc4,#003371,#549688,#25f8cb,#7fecad);
        position: relative;
        background-size: 500%;
        animation: movingBG 15s infinite;

    }
    @keyframes movingBG{
        0%{
            background-position: 0% 50%;
        }
        50%{
            background-position: 100% 50%;
        }
        100%{
            background-position: 0% 50%;
        }
    }
    .loginBox{
        width: 600px;
        height: 400px;
        background-color: #def0f4d6;
        box-shadow: 0px 1px 3px rgb(142, 142, 142);
        position: absolute;
        border-radius: 8px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        transition:height 0.15s;
    }
    .regBox{
        height: 500px;
    }
    .title{
        text-align: center;
    }
    .radioBox{
        margin-bottom: 30px;
    }
    .el-form{
        padding: 0 25px;
        margin-top: 10px;
    }

    .btn-log,.btn-reg{
        width: 100%;
        height: 45px;   
        
    }
    .btn-reg{
        margin-top: 20px;
    }

</style>
